﻿var imageExplorerCreated = false;
var imageExplorer;
var imageStore;
var imageView;
var imageSize = 'Small';

function onNodeClick(node, eventObject)
{
   imageStore.baseParams.node = node.id;
   imageStore.load();
}

function createTemplate(imageSize)
{
   return new Ext.XTemplate(
		'<tpl for=".">',
            '<div class="thumb-wrap-' + imageSize + '" id="{id}">',
		    '<div class="thumb"><img src="Image.ashx?id={id}&newSize=' + imageSize + '" title=""></div>',
		    '<span class="thumb-title">{text}</span></div>',
        '</tpl>',
        '<div class="x-clear"></div>'
	  ); 
}

function imageSizeChecked(item, checked)
{
   if (checked)
   {
      imageView.tpl = createTemplate(item.text);
      imageView.refresh();
   }
}

function createImageStoreExplorer() {
   
   if (imageExplorerCreated) 
   {
      imageExplorer.show(this);
      return;
   }
   
   // create the tree
   var Tree = Ext.tree;
         
   var treeLoader = new Tree.TreeLoader({dataUrl:'ImageStore.svc/GetFolderNodes',requestMethod:'GET'});
   var onLoadFailure = function(t, n, r)
   {
      Ext.get("errors").update("<p>" + r.responseText + "</p>");
   }
   
   treeLoader.addListener("loadexception", onLoadFailure);
   
   var treePanel = new Tree.TreePanel({
       animate:true, 
       autoScroll:true,
       loader: treeLoader,
       enableDD:true,
       containerScroll: true,
       dropConfig: {appendOnly:true},
       title:'Image Folders',
       region:'west',
       split:true,
       width:200,
       collapsible:true,
       margins:'3 0 0 3'   
   });
   
   treePanel.addListener('click',onNodeClick);
   
   // add a tree sorter in folder mode
   new Tree.TreeSorter(treePanel, {folderSort:true});
   
   // set the root node
   var root = new Tree.AsyncTreeNode({
       text: 'Image Stores', 
       draggable:false, // disable root node dragging
       id:'Root'
   });
   treePanel.setRootNode(root);
   
   // create the views menu list
   var viewsMenu = new Ext.menu.Menu({id:'viewsMenu'});
   
   for (imageSizeIndex in imageSizes)
   {
      var isChecked = false;
      if (imageSizeIndex == '0') isChecked = true;
      
      if (imageSizeIndex!='remove')
      {
         viewsMenu.add(new Ext.menu.CheckItem({group:'imageSize', text:imageSizes[imageSizeIndex], checked:isChecked, handler:imageSizeChecked}));
      }
   }
   
   // create the image display toolbar
   var imagesToolbar = new Ext.Toolbar({
     items:[{
         text: 'View',
         menu: viewsMenu
     }]
   });      
   
      
   // create the JSON store
   imageStore = new Ext.data.JsonStore({
      url:'ImageStore.svc/GetImageNodes',
      fields:['id','text']
      });
   
   // create the template
    var tpl = createTemplate(imageSize);
   
   imageView = new Ext.DataView({
         store: imageStore,
         tpl: tpl,
         autoHeight:true,
         multiSelect:false,
         overClass:'x-view-over',
         itemSelector:'div.thumb-wrap',
         emptyText:'No images to display',
         loadingText:'Loading image',
         cls:'imageViewContainer'
       });
   
   // create the image display panel
   var imagePanel = new Ext.Panel({
       id:'images-view',
       title:'Image Files',
       region:'center',
       margins:'3 0 0 0',
       tbar:imagesToolbar,
       items: imageView,
       autoScroll:true
   });   
   
   // create the image Previw panel
   var previewPanel = new Ext.Panel({
      id:'image-preview',
      title:'Image Preview',
      region:'east',
      margins:'3 3 0 0',
      autoScroll:true,
      split:true,
      collapsible:true,
      collapsed:true,
      width:200
   });
   
   var bagPanel = new Ext.Panel({
      id:'bag',
      title:'Bag',
      region:'south',
      margins:'0 3 3 3',
      autoScroll:true,
      split:true,
      height:120,
      collapsible:true});
       
   // create the window
   imageExplorer = new Ext.Window({
       title:'Image Explorer',
       closable:true,
       closeAction:'hide',
       width:900,
       height:600,
       plain:true,
       layout:'border',
       items: [treePanel, imagePanel, bagPanel, previewPanel]
   });

   
   imageExplorer.show(this);
   
   // render the tree
   treePanel.render();    
   
   imageExplorerCreated = true;     
}

